<template>
  <view class="myPicker" :class="[className]">
    <view class="picker_title">
      <view class="picker_cancle" @click="handleCancle">取消</view>
      <view class="picker_titleText">{{ title }}</view>
      <view class="picker_confirm" @click="handleConfirm">确认</view>
    </view>
    <view class="picker_content">
      <!--  :immediateChange="true" -->
      <picker-view :immediateChange="immediateChange" :value="value1" indicator-style="height: 50px;" @change="handleChange" @pickstart="pickstart"
        @pickend="pickend">
        <picker-view-column v-for="(item,index) in list" :key="index">
          <view class="pickerItem" v-for="(  childItem, index  ) in   item  " :key="childItem[keyName]">
            <slot name="title">{{ childItem[rangeKey] }}</slot>
          </view>
        </picker-view-column>
      </picker-view>
      <!-- <template v-if="list.length">暂无数据</template> -->
    </view>
  </view>
</template>
<script>
  export default{
    name:'myPicker',
    props:{
      className: {
				type: String,
				default: ''
			},
      immediateChange:{
        type:Boolean,
        default:true
      },
      title:{
        type:String,
        default:'请选择选项'
      },
      list:{
        type:Array,
        default:()=>([])
      },
	    keyName:{
        type:String,
        required: true,
        default:''
      },
      rangeKey:{
        type:String,
        default:'name'
      },
      value:{
        type:Array,
        default:()=>([])
      }
    },
    data(){
      return{
		valueIndex:[],
        value1:[],//[index,index]
        oldVal:[],//[index,index]
        keyVal:[],//选中的item：[item,item]
        modelVal:[]//选中的值:[1,2]eg:[value,value]
      }
    },
    methods:{
      handleConfirm(e){
        console.log('handleConfirm',this.value1)
		 console.log('valueIndex',this.valueIndex)
        if(!this.value1.length){
          let keyVal=[],modelVal=[]
          this.list.forEach(el => {
            console.log('el:',el)
            console.log('this.keyName',this.keyName)
            if(el.length){
              console.log('el[0]:',el[0])
              keyVal.push(el[0])
              modelVal.push(el[0][this.keyName])
            }
          });
          this.keyVal.push(...keyVal)
          this.modelVal.push(...modelVal)
          console.log(888,this.keyVal,this.modelVal)
		  console.log('value11111',this.value1)
        }
        this.$emit('confirm',this.keyVal,this.modelVal,this.valueIndex)
        this.$emit('input',this.modelVal)
      },
      handleCancle(){
        this.value1.splice(0)
        this.value1.push(...JSON.parse(JSON.stringify(this.oldVal)))
        let list=this.list, keyVal=[],modelVal=[]
        for(let i=0;i<this.value1.length;i++){
          keyVal.push(list[i][this.value1[i]])
          modelVal.push(list[i][this.value1[i]][this.keyName])
        }
        this.keyVal=JSON.parse(JSON.stringify(keyVal))
        this.modelVal=JSON.parse(JSON.stringify(modelVal))
        this.$emit('cancle')
      },
      handleChange(e){
        console.log(8888,'handleChange',e)
        let list=this.list;
        console.log(1,list)
        let keyVal=[],modelVal=[]
        for(let i=0;i<e.detail.value.length;i++){
          console.log(2,e.detail.value[i])
          let item=list[i][e.detail.value[i]]
          keyVal.push(item)
          modelVal.push(item[this.keyName])
        }
        this.keyVal=keyVal
        this.modelVal=modelVal
        this.value1=e.detail.value
		this.valueIndex=e.detail.value
        console.log('end:',this.keyVal,this.modelVal,this.value1)
      },
      pickend(e){
        console.log(e)
        this.$emit('pickend')
      },
      pickstart(e){
        console.log(e)
        this.$emit('pickstart')
      }
    },
    watch:{
		value: {
			handler(newValue) {
			let val=[]
			let list=this.list, keyVal=[]
			for(let i=0;i<newValue.length;i++){
			  let index=list[i].findIndex(el=>{
			    return el[this.keyName]===newValue[i]
			  })
			  if(index!==-1){
			    val.push(index)
			    keyVal.push(list[i][index])
			  }
			}
			let that = this
			setTimeout((
			)=> {
				that.keyVal=JSON.parse(JSON.stringify(keyVal))
				that.value1.splice(0)
				that.value1.push(...JSON.parse(JSON.stringify(val)))
				that.oldVal.splice(0)
				that.oldVal.push(...JSON.parse(JSON.stringify(val)))
				that.value1 = that.value1.length?that.value1:newValue
				console.log('value1111',that.value1)
			},500)
			
			},
			immediate:true,
			deep:true,
		}
    }
  }
</script>

<style lang="scss">
.myPicker{
  background-color: #fff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  .picker_title{
    padding: 32rpx;
    display: flex;
    align-items: center;
  }
  .picker_cancle{
    font-size: 28rpx;
    color: #B3BCCC;
    line-height: 44rpx;
  }
  .picker_confirm{
    font-size: 28rpx;
    color: #247afc;
    line-height: 44rpx;
  }
  &.owner{
		.picker_confirm{
			color: #FF8423;
		}
	}
	&.police{
		.picker_confirm{
			color: #1546B9;
		}
	}
	&.worker{
		.picker_confirm{
			color: #A197FF;
		}
	}

  .picker_titleText{
    text-align: center;
    flex: 1;
    font-size: 28rpx;
    font-weight: bold;
    color: #1F2E49;
    line-height: 44rpx;
  }
  .picker_content{
		width: 100%;
		// height: 40vh;
    picker-view {
      height: 40vh;
      margin-top: 20rpx;
    }
	}
	.pickerItem {
		text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #1F2E49;
    line-height: 50px;
	}
}
</style>